import React, { useEffect } from 'react';
import './detail.css'
import { useLocation, useParams } from 'react-router-dom'
import HeaderNavComponent from '../../components/detail/headerNavComponent/HeaderNavComponent'
import Detailswiper from '../../components/detail/detailSwiper/DetailSwiper';
import Commodityprice from '../../components/detail/commodityPrice/CommodityPrice';
import CommodityInfo from '../../components/detail/commodityInfo/CommodityInfo';
import CommoditySpecifications from '../../components/detail/commoditySpecifications/CommoditySpecifications';
import CommodityEvaluate from '../../components/detail/commodityEvaluate/CommodityEvaluate';
import BottomNav from '../../components/detail/bottomNav/BottomNav';
import { connect } from 'react-redux';
import * as actions from './store/actionCreators'
const Detail = (props) => {
    let { pathname } = useLocation()
    const { data, getDetailDispatch } = props
    // console.log('detail', data);
    // 传递过来的id
    let id = pathname.replace('/detail/', '') || undefined
    const { commodityImgs = [], buysImgs = [], commodityDetail = [], commodityActive = [], commonts = {} } = data
    // const commodityDetail = data.commodityDetail
    const commodityPrice = data.commodityPrice
    const commodityPriceDiscount = data.commodityPriceDiscount
    // const commodityActive = data.commodityActive
    const installment = data.installment
    const commodityName = data.commodityName
    const deliveryAddress = data.deliveryAddress
    const courierFees = data.courierFees
    const storeName = data.storeName
    // const commonts = data.commonts
    // const buysImgs = data.buysImgs
    // const commodityImgs  =data.commodityImgs
    // console.log('commodityImgs',commodityImgs);

    const product = {
        "id":id,
        "storeName":storeName,
        "productAvatar":commodityImgs[0],
        "productName":commodityName,
        "productPrice":commodityPrice,
        "productNum":1
    }
    useEffect(() => {
        if (id) {
            getDetailDispatch(id)
        }
    }, [])
    return (
        <div className="detail-container">
            <HeaderNavComponent></HeaderNavComponent>
            <Detailswiper commodityImgs={commodityImgs}></Detailswiper>
            {/* 商品价格 */}
            <Commodityprice commodityPrice={commodityPrice} commodityPriceDiscount={commodityPriceDiscount}></Commodityprice>
            {/* 商品信息，主要是1名字1 */}
            <CommodityInfo installment={installment} commodityName={commodityName} commodityActive={commodityActive}></CommodityInfo>
            {/* 商品规格参数 */}
            <CommoditySpecifications deliveryAddress={deliveryAddress} courierFees={courierFees}></CommoditySpecifications>
            {/* 评价 */}
            <CommodityEvaluate commonts={commonts} buysImgs={buysImgs}></CommodityEvaluate>

            <div className="SplitLine">
                <svg className="iconfont" aria-hidden={true}>
                    <use xlinkHref="#icon-aixin"></use>
                </svg>
                宝贝详情
            </div>

            <div className="detail-commodityImgs">
                {
                    commodityDetail.map((item, index) => {
                        return (
                            <div className="detailImg-item" key={index}>
                                <img src={item.imgUrl} alt="" />
                            </div>
                        )
                    })
                }
            </div>

            {/* 购物车组件 */}
            <BottomNav product = {product}></BottomNav>
        </div>
    )
}

const mapStateToProps = (state) => {
    // console.log('这是detailstate',state);
    return {
        data: state.detail.detaildata
    }
}

const mapStateToDispatch = (dispatch) => {
    return {
        getDetailDispatch(id) {
            dispatch(actions.requestDetailData(id))
        }
    }
}
export default connect(mapStateToProps, mapStateToDispatch)(Detail)